<template>
<div class="layerRtb layerRtb-threecolumn">
    <three-title :title="{name:'合同'}"></three-title>
    <div class="layerRtb-scroll thinScroll" v-scrollHeight = "84">
        <div class="analyItem">
            <p class="analyItemTit tx-center" :class="this.manager.user_join_state === undefined || this.manager.user_join_state === null || this.manager.user_join_state === '' ? '' : 'analyLightGreen'">类型</p>
            <div class="analyItemCon">
                 <p class="col-md-8">
                        <span class="cLightGray pr8">类型</span>
                        <span v-if="flg==0">{{this.manager.user_join_state ? (this.manager.user_join_state==1?'传统入职':'平台入驻') : ''}}</span>
                        <span v-if="flg==1">
                            <select name="set_user_info_user_join_state" class="width100" v-model="userJoinState">
                        <option value="1">传统入职</option>
                        <option value="2">平台入驻</option>
                    </select>
                        </span>
                    </p>
                   <div class="imgbox imgbox1 col-md-3" style="margin-top: 15px;" v-if="flg==0 || flg==3 || flg==2">
                        <img src="https://gnr.rxjy.com/hrms/static/modules/cur/images/edit_img.png" title="编辑" width="20" class="fr pointer mr5" @click="flg=1">
                    </div>
                   <div class="imgbox imgbox1 " style="margin-top: 15px;" v-if="flg==1">
                <img src="https://gnr.rxjy.com/hrms/static/modules/cur/images/save_img.png" title="保存" width="20" class="fl pointer mr5" name="update_stage_info_intention" @click="saveThis(this)">
                <img src="https://gnr.rxjy.com/hrms/static/modules/cur/images/goback_img.png" title="返回" width="20" class="fl pointer mr5" @click="flg=0">
            </div>
            </div>
        </div>
        <div class="analyItem">
            <p class="analyItemTit tx-center" :class="photoList17.length === 0 ? '' : 'analyLightGreen'">平台协议</p>
            <div class="analyItemCon">
                <!-- v-if="photoFlg==1 && photoList17.length === 0 " -->
                         <rx-upload  class="col-md-3" :data="{id: 11,attrModelid:17}" :init="{class: 1, mime: 1,multi:true}" :elStyle="{width:'80px', height: '70px'}" @success="successUpload">
                            <div class="fl uiImgUpload uiImgUpload-gblock mr10">
                                <a href="javascript:">
                                    <span type="file" value="" class="file"></span>
                                    <em class="bgIcon file-ico"></em>
                                </a>
                            </div>
                        </rx-upload>
                            <rx-viewer :options="{}"  >
                            <div  v-for="(item, index) in this.photoList17" :key="index"  class="fl">
                                <div class="look_imgHover relative tx-center col-md-3" :style="elstyle" >
                                <img  :src="item.url" />
                                    <div class="upload_finish_div">
                                        <div class="upload_finish_bg"></div>
                                        <div class="upload_finish_linksm">
                                            <div class="dis-il-block">
                                                <a href="javascript:" class="ImgBtn enlarge_viewer enlarge_link" :data-src="item.url"></a>
                                                <a href="javascript:"  class="ImgBtn delect_link" @click="delImg(item.attrInfoId, 17)"></a>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- <div class="imgInfo tx-center">平台协议</div> -->
                                      <!-- <input type="button" class="uiBtn-small uiBtn-red " value="删除"> -->
                                </div>
                            </div>
                        </rx-viewer>
            </div>
        </div>
        <div class="analyItem">
            <p class="analyItemTit tx-center" :class="photoList23.length === 0 ? '' : 'analyLightGreen'">质量协议</p>
            <!-- <a href="https://www.baidu.com">百度</a> -->
            <div class="analyItemCon">
                         <rx-upload class="col-md-3" :data="{id: 11,attrModelid:23}" :init="{class: 1, mime: 1,multi:true}" :elStyle="{width:'80px', height: '70px'}" @success="successUpload">
                            <div class="fl uiImgUpload uiImgUpload-gblock mr10">
                                <a href="javascript:">
                                    <span type="file" value="" class="file"></span>
                                    <em class="bgIcon file-ico"></em>
                                </a>
                            </div>
                        </rx-upload>
                            <rx-viewer :options="{}"  >
                            <div v-for="(item, index) in this.photoList23" :key="index" class="fl">
                                <div  class="look_imgHover relative tx-center" :style="elstyle" >
                                <img  :src="item.url" />
                                    <div class="upload_finish_div">
                                        <div class="upload_finish_bg"></div>
                                        <div class="upload_finish_linksm">
                                            <div class="dis-il-block">
                                                <a href="javascript:" class="ImgBtn enlarge_viewer enlarge_link" :data-src="item.url"></a>
                                                <a href="javascript:"  class="ImgBtn delect_link" @click="delImg(item.attrInfoId, 23)"></a>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- <div class="imgInfo tx-center">质量协议</div> -->
                                      <!-- <input type="button" class="uiBtn-small uiBtn-red " value="删除"> -->
                                </div>
                            </div>
                        </rx-viewer>
            </div>
        </div>
        <div class="analyItem">
            <p class="analyItemTit tx-center" :class="photoList24.length === 0 ? '' : 'analyLightGreen'">安全协议</p>
            <div class="analyItemCon">
                         <rx-upload class="col-md-3" :data="{id: 11,attrModelid:24}" :init="{class: 1, mime: 1,multi:true}" :elStyle="{width:'80px', height: '70px'}" @success="successUpload">
                            <div class="fl uiImgUpload uiImgUpload-gblock mr10">
                                <a href="javascript:">
                                    <span type="file" value="" class="file"></span>
                                    <em class="bgIcon file-ico"></em>
                                </a>
                            </div>
                        </rx-upload>
                            <rx-viewer  :options="{}"  >
                            <div  v-for="(item, index) in this.photoList24" :key="index"  class="fl">
                                <div  class="look_imgHover relative tx-center" :style="elstyle" >
                                <img  :src="item.url" />
                                    <div class="upload_finish_div">
                                        <div class="upload_finish_bg"></div>
                                        <div class="upload_finish_linksm">
                                            <div class="dis-il-block">
                                                <a href="javascript:" class="ImgBtn enlarge_viewer enlarge_link" :data-src="item.url"></a>
                                                <a href="javascript:"  class="ImgBtn delect_link" @click="delImg(item.attrInfoId, 24)"></a>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- <div class="imgInfo tx-center">安全协议</div> -->
                                      <!-- <input type="button" class="uiBtn-small uiBtn-red " value="删除"> -->
                                </div>
                            </div>
                        </rx-viewer>
            </div>
        </div>
        <div class="analyItem">
            <p class="analyItemTit tx-center" :class="photoList25.length === 0 ? '' : 'analyLightGreen'">合作协议</p>
            <div class="analyItemCon">
                         <rx-upload class="col-md-3" :data="{id: 11,attrModelid:25}" :init="{class: 1, mime: 1,multi:true}" :elStyle="{width:'80px', height: '70px'}" @success="successUpload">
                            <div class="fl uiImgUpload uiImgUpload-gblock mr10">
                                <a href="javascript:">
                                    <span type="file" value="" class="file"></span>
                                    <em class="bgIcon file-ico"></em>
                                </a>
                            </div>
                        </rx-upload>
                            <rx-viewer  :options="{}"  >
                            <div  v-for="(item, index) in this.photoList25" :key="index"  class="fl">
                                <div  class="look_imgHover relative tx-center" :style="elstyle" >
                                <img  :src="item.url" />
                                    <div class="upload_finish_div">
                                        <div class="upload_finish_bg"></div>
                                        <div class="upload_finish_linksm">
                                            <div class="dis-il-block">
                                                <a href="javascript:" class="ImgBtn enlarge_viewer enlarge_link" :data-src="item.url"></a>
                                                <a href="javascript:"  class="ImgBtn delect_link" @click="delImg(item.attrInfoId, 25)"></a>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- <div class="imgInfo tx-center">合作协议</div> -->
                                      <!-- <input type="button" class="uiBtn-small uiBtn-red " value="删除"> -->
                                </div>
                            </div>
                        </rx-viewer>
            </div>
        </div>
        <!-- <div class="analyItem">
            <p class="analyItemTit tx-center" :class="this.photoList[26] === undefined || this.photoList[26] === null || this.photoList[26] === '' ? '' : 'analyLightGreen'">解除协议</p>
            <div class="analyItemCon">
                         <rx-upload  v-if="photoFlg==1 && (this.photoList[26] === undefined || this.photoList[26] === null || this.photoList[26] === '')"  :data="{id: 11,attrModelid:26}" :init="{class: 1, mime: 1,multi:true}" :elStyle="{width:'80px', height: '70px'}" @success="successUpload">
                            <div class="fl uiImgUpload uiImgUpload-gblock mr10">
                                <a href="javascript:">
                                    <span type="file" value="" class="file"></span>
                                    <em class="bgIcon file-ico"></em>
                                </a>
                            </div>
                        </rx-upload>
                            <rx-viewer v-else :options="{}"  >
                            <div class="fl">
                                <div  class="look_imgHover relative tx-center" :style="elstyle" >
                                <img  :src="photoList['26']" />
                                    <div class="upload_finish_div">
                                        <div class="upload_finish_bg"></div>
                                        <div class="upload_finish_linksm">
                                            <div class="dis-il-block">
                                                <a href="javascript:" class="ImgBtn enlarge_link enlarge_viewer"></a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="imgInfo tx-center">解除协议</div>
                                </div>
                            </div>
                        </rx-viewer>
            </div>
        </div> -->
    </div>

            <div class="analyItem">
            <p class="analyItemTit tx-center">综合</p>
            <div class="analyItemCon">
                <p class="fl">
                    <span v-if="this.photoList17.length === 0 ||
                    this.photoList23.length === 0 ||
                    this.photoList24.length === 0 ||
                    this.photoList25.length === 0 ||
                    this.manager.user_join_state === undefined || this.manager.user_join_state === null || this.manager.user_join_state === ''" class="circlemark circlemark-lightRed">待</span>
                    <span v-else class="circlemark circlemark-lightGreen">全</span>
                </p>
            </div>
        </div>
</div>
</template>
<script>
import {savePhotoByUid, updateJoinPmUserInfoPJoinType, selectPmUserInfoManager, findPhotoByUid, delPhotoByUid} from '../../Resources/Api/index'
import { mapGetters, mapMutations } from 'vuex'
export default {
    data () {
        return {
            photo17: {},
            photo23: {},
            photo24: {},
            photo25: {},
            photoFlg: 1,
            input: '',
            flg: 0,
            elstyle: {width: '80px', height: '70px'},
            xieyiImgList: [],
            xieyiImg: '',
            heTongiImgList: [],
            heTongiImg: '',
            userJoinState: 0,
            manager: {}, // 查询返回的信息
            photoList: {}, // 照片回显
            photoList17: [], // 根据照片类别回显
            photoList23: [], // 根据照片类别回显
            photoList24: [], // 根据照片类别回显
            photoList25: [] // 根据照片类别回显
        }
    },
    created () {
        // this.manager = this.$route.query.manager
        // this.userJoinState = this.manager.user_join_state
        this.selectPmUserInfoManager() // 查询入职类型
        // this.getUserPhotoList() // 回显照片
        this.findPhotoByUid(17)
        this.findPhotoByUid(23)
        this.findPhotoByUid(24)
        this.findPhotoByUid(25)
    },
    methods: {
        delImg (value, value1) {
            delPhotoByUid({
                attrInfoId: value
            }).then(result => {
                if (Number(result.data.StatusCode) === 0) {
                    layer.msg('删除成功')
                    // this.getUserPhotoList()
                    this.findPhotoByUid(Number(value1))
                    this.setUpdatePlate()
                    // this.$router.push(this.$route.matched[1].path)
                }
            }).catch(err => {
                console.log('删除指定照片失败' + err)
            })
        },
        // 查询签约
        selectPmUserInfoManager () {
            selectPmUserInfoManager({
                uid: this.leftInfo.uid // this.leftInfo.uid
            }).then(res => {
                if (res.data.StatusCode === 0) {
                    this.manager = res.data.Body
                    this.userJoinState = this.manager.user_join_state
                }
            }).catch(err => {
                console.log('查询签约 selectPmUserInfoManager失败，原因为' + err)
            })
        },
        saveThis () {
            // alert(this.userJoinState)
            updateJoinPmUserInfoPJoinType({
                uid: this.leftInfo.uid, // this.leftInfo.uid
                userJoinState: this.userJoinState
            }).then(res => {
                if (res.data.StatusCode === 0) {
                    layer.msg('提交成功')
                    this.$router.push(this.$route.matched[1].path)
                }
            }).catch(err => {
                console.log('修改入职类型 updateJoinPmUserInfoPJoinType 失败，原因为' + err)
            })
        },
        // 银行卡上传
        successUpload (value) {
            savePhotoByUid({
                uid: this.leftInfo.uid, // this.leftInfo.uid,
                attrModelid: value.data.attrModelid,
                userType: 1,
                attrServerUrl: '',
                attrFileUrl: value.src
            }).then(res => {
                if (res.data.StatusCode === 0) {
                    this.$message('上传成功')
                    // debugger
                    this.findPhotoByUid(value.data.attrModelid)
                    // this.getUserPhotoList() // 银行卡回显
                    // if (value.data.attrModelid === 17) {
                    this.setUpdatePlate()
                    // }
                }
            }).catch(err => {
                console.log(err)
            })
        },
        // 银行卡回显
        // getUserListinfoPhoto () {
        //     getUserListinfoPhoto({
        //         uid: this.leftInfo.uid // this.leftInfo.uid,
        //     }).then(res => {
        //         if (res.data.StatusCode === 0) {
        //             this.photoList = res.data.Body
        //         }
        //         console.log(res.data.Body)
        //     }).catch(err => {
        //         console.log('银行卡回显getUserListinfoPhoto失败，失败原因为' + err)
        //     })
        // },
        // 照片回显
        // getUserPhotoList () {
        //     // let _this = this
        //     // _this.photo9 = {}
        //     getUserPhotoList({
        //         uid: this.leftInfo.uid // this.leftInfo.uid,
        //     }).then(res => {
        //         if (res.data.StatusCode === 0) {
        //             this.photoList = res.data.Body
        //             if (this.photoList.length > 0) {
        //                 this.photoList.forEach(photo => {
        //                     if (Number(photo.attr_modelid) === 17) {
        //                         this.photo17 = photo
        //                     }
        //                     if (Number(photo.attr_modelid) === 23) {
        //                         this.photo23 = photo
        //                     }
        //                     if (Number(photo.attr_modelid) === 24) {
        //                         this.photo24 = photo
        //                     }
        //                     if (Number(photo.attr_modelid) === 25) {
        //                         this.photo25 = photo
        //                     }
        //                 })
        //             }
        //         }
        //     }).catch(err => {
        //         console.log('银行卡回显getUserListinfoPhoto失败，失败原因为' + err)
        //     })
        // },
        findPhotoByUid (value) {
            // let attr
            // if (Number(value) === 17) {
            //     attr = 17
            // }
            findPhotoByUid({
                uid: this.leftInfo.uid,
                attrModelid: Number(value)
            }).then(result => {
                if (Number(result.data.StatusCode) === 0) {
                    if (Number(value) === 17) {
                        this.photoList17 = result.data.Body
                    } else if (Number(value) === 23) {
                        this.photoList23 = result.data.Body
                    } else if (Number(value) === 24) {
                        this.photoList24 = result.data.Body
                    } else if (Number(value) === 25) {
                        this.photoList25 = result.data.Body
                    }
                }
            }).catch(err => {
                console.log(err)
            })
        },
        ...mapMutations({
            setUpdatePlate: `SET_UPDATE_PLATE`
        }),
        sucessXie (value) {
            this.xieyiImgList.push(value.src)
            this.xieyiImg = this.xieyiImgList.join(',')
        }
    },
    computed: {
        ...mapGetters(['leftInfo'])
    },
    watch: {
        leftInfo () {
        },
        $route () {
            this.flg = 0
        }
    }

}
</script>
<style  scoped>
    .imgbox {
    position: absolute;
    right: 10px;
    top: 10px;
}
</style>
